import "./TransFormCarousel.css";
import { ReactComponent as RightBtnSvg } from "../../common/svg/right-btn.svg";
import { ReactComponent as LeftBtnSvg } from "../../common/svg/left-btn.svg";
import { useEffect, useState } from "react";
import useInterval from "../../utils/useInterval";

function CarouselSide({ index, data, width, carouselImgs }) {
  return (
    <div className={`carousel-slide${data.className}`} style={{
      width: `${width}px`,
      transform: `translateX(${data.displace}px) scale(${data.scale})`,
      zIndex: `${data.zIndex}`,
    }}>
      <a href={carouselImgs[index].url} className="channel-img" style={{ opacity: `${data.opacity}` }} target={"_blank"}>
        <div className="v-img">
          <img src={carouselImgs[index].imgSrc} alt="" />
        </div>
        <div className="channel-img-mask">
          <p className="channel-img-mask-text">{carouselImgs[index].title}</p>
        </div>
      </a>
    </div>
  );
}

function TransFormCarousel({ carouselImgs, padding = 96, scrollBarWidth = 17, minWidth = 1200 }) {

  const initialWidth = window.innerWidth - padding * 2 - scrollBarWidth;
  const imgRate = 0.5528930450029223;

  const [curIndex, setCurIndex] = useState(0);
  const [width, setWidth] = useState(initialWidth >= minWidth - padding * 2 ? initialWidth > 2078 ? 2078 : initialWidth : minWidth - padding * 2);
  const [timer, setTimer] = useState(null);
  const [delay, setDelay] = useState(2000);

  const baseWidth = width * (1 - imgRate) / 2; // 382.5
  const minScale = 0.85;
  const diffWidth = (width - (width * imgRate * minScale)) / 2;

  const transOrder = [
    {
      className: " big-size",
      displace: baseWidth,
      scale: 1,
      zIndex: 3,
      opacity: 1
    },
    {
      className: " pre-slide",
      displace: baseWidth - diffWidth,
      scale: 0.85,
      zIndex: 1,
      opacity: .3
    },
    {
      className: "",
      displace: baseWidth + diffWidth + width * imgRate,
      scale: 0.85,
      zIndex: 1,
      opacity: .3
    },
    {
      className: " next-slide",
      displace: baseWidth + diffWidth,
      scale: 0.85,
      zIndex: 2,
      opacity: .3
    },
  ]

  useEffect(() => {
    changPoint(curIndex);
  })

  // useEffect(() => {
  //   if (timer != null) {
  //     return;
  //   }
  //   let timers = setInterval(() => {
  //     document.querySelectorAll(".channel-carousel-buttons button")[1].click();
  //   }, 2000)
  //   setTimer(timers);
  //   return () => clearInterval(timers);
  // }, [])

  useInterval(() => document.querySelectorAll(".channel-carousel-buttons button")[1].click(), delay)

  useEffect(() => {
    const handleWindowReszie = () => setWidth(document.querySelector(".carousel").offsetWidth);
    window.addEventListener("resize", handleWindowReszie);

    return () => window.removeEventListener("resize", handleWindowReszie);
  }, [])

  const handleMouseEnter = () => {
    setDelay(null);
    // clearTimeout(timer);
    // setTimer(null);
  }

  const handleMouseLeave = () => {
    setDelay(2000)
    // let timers = setInterval(() => {
    //   if (document.querySelectorAll(".channel-carousel-buttons button")[1] != null) {
    //     document.querySelectorAll(".channel-carousel-buttons button")[1].click();
    //   }
    // }, 2000)
    // setTimer(timers);
  }

  const btnRightClick = (e, curIndex) => {
    e.nativeEvent.stopPropagation();
    let index = curIndex == transOrder.length - 1 ? 0 : curIndex + 1;
    setCurIndex(index);
  }

  const btnLeftClick = (curIndex) => {
    let index = curIndex == 0 ? transOrder.length - 1 : curIndex - 1;
    setCurIndex(index);
  }

  const changPoint = (curIndex) => {
    let pointList = document.querySelector(".channel-carousel-tool ul").querySelectorAll("li");
    for (let i = 0; i < pointList.length; i++) {
      pointList[i].removeAttribute("class");
    }
    pointList[curIndex].setAttribute("class", "active");
  }

  const clickPoint = (e) => {
    if (typeof (e.target.value) == "undefined") {
      return;
    }
    setCurIndex(e.target.value);
  }

  return (
    <div className="channel-swiper">
      <div className="carousel" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
        <div className="carousel-container">
          <div className="channel-carousel-buttons">
            <div>
              <button onClick={() => btnLeftClick(curIndex)}>
                <LeftBtnSvg />
              </button>
              <button onClick={(e) => btnRightClick(e, curIndex)}>
                <RightBtnSvg />
              </button>
            </div>
          </div>
          <div className="channel-carousel-tool">
            <ul className="channel-nav-click" onClick={(e) => clickPoint(e)}>
              <li value={0} className="active"></li>
              <li value={1}></li>
              <li value={2}></li>
              <li value={3}></li>
            </ul>
          </div>
          <div className="carousel-transform clearfix">
            {transOrder.map((_, index) => {
              return (
                <CarouselSide
                  key={index}
                  index={index}
                  data={transOrder[(curIndex + index) % transOrder.length]}
                  width={width * imgRate}
                  carouselImgs={carouselImgs}
                />
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default TransFormCarousel;